<template>
  <div class="setting-container">
    <div class="divider">
      <span>元素设置</span>
    </div>
    <div class="container">
      <el-form label-width="80" :model="widget">
        <el-form-item label="内容：">
          <el-input v-model="widget.content" />
        </el-form-item>
        <el-form-item label="条码间隔：">
          <el-input-number v-model="widget.codeWidth" :min="1" />
        </el-form-item>
        <el-form-item label="宽度：">
          <el-input-number v-model="widget.width" :min="1" />
        </el-form-item>
        <el-form-item label="高度：">
          <el-input-number v-model="widget.height" :min="1" />
        </el-form-item>
        <el-form-item label="x轴坐标：">
          <el-input-number v-model="widget.x" :min="0" />
        </el-form-item>
        <el-form-item label="y轴坐标：">
          <el-input-number v-model="widget.y" :min="0" />
        </el-form-item>
        <el-form-item label="颜色：">
          <div class="sketch-container">
            <div
              class="sketch"
              :style="{ 'background-color': widget.codeColor }"
              @click="showSketchHandler()"
            ></div>
            <Sketch
              v-model="sketchBgColor"
              class="picker"
              :show="showSketch"
              @chang-button="changSketchButton($event)"
            />
          </div>
        </el-form-item>
        <el-form-item label="层级：">
          <el-input-number v-model="widget.zIndex" :min="0" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useEleStore } from '@/store/modules/coms'
  import { Sketch } from '@ans1998/vue3-color'
  const Store = useEleStore()
  const { getCurrentWidget: widget } = storeToRefs(Store)
  // 选择颜色
  const sketchBgColor = ref(widget.value.codeColor)
  const showSketch = ref(false)
  const changSketchButton = (picker: any) => {
    showSketch.value = false
    if (picker.isOk) {
      sketchBgColor.value = `#${picker.hex}`
      widget.value.codeColor = `#${picker.hex}`
    }
  }
  const showSketchHandler = () => {
    showSketch.value = true
    sketchBgColor.value = widget.value.codeColor
  }
</script>

<style lang="scss" scoped>
  .setting-container {
    .divider {
      position: relative;
      margin: 10px 0;
      font-weight: 700;
      font-size: 16px;
      color: #515a6e;

      span {
        position: relative;
        z-index: 2;
        padding: 0 4px;
        margin-left: 20px;
        background-color: #fff;
      }

      &:before {
        position: absolute;
        width: 100%;
        content: '';
        display: block;
        border-top: 1px solid #e8eaec;
        top: 50%;
        transform: translateY(50%);
        z-index: 1;
      }
    }

    .sketch-container {
      position: relative;
      .sketch {
        width: 40px;
        height: 20px;
        cursor: pointer;
        border: 1px solid;
      }

      .picker {
        position: absolute;
        z-index: 99;
        top: 28px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
</style>
